<script setup>
	import { storeToRefs } from 'pinia'
	import { useHomeStore } from '@/stores/modules/home'

	const homeStore = useHomeStore()
	const { categoties } = storeToRefs(homeStore)
</script>

<template>
	<div class="nav-categories">
		<template
			v-for="(item, index) in categoties"
			:key="item.id">
			<a
				class="item"
				:href="item.navigateUrl">
				<img
					:src="item.pictureUrl"
					alt="" />
				<div class="text">{{ item.title }}</div>
			</a>
		</template>
	</div>
</template>

<style lang="scss" scoped>
	.nav-categories {
		display: flex;
		padding: 5px 10px;
		overflow-x: auto;
		height: 80px;
		// 隐藏滚动条
		&::-webkit-scrollbar {
			display: none;
		}
		.item {
			display: flex;
			width: 70px;
			//  关闭自动压缩
			flex-shrink: 0;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			img {
				height: 32px;
				width: 32px;
			}
			.text {
				font-size: 12px;
				margin-top: 8px;
			}
		}
	}
</style>
